<template>
    <div id="imageContainer">
        <div class="box">
            <img :src="src" alt="Image" ref="pic" />
            <Pot type="lt"></Pot>
            <Pot type="rb"></Pot>
            <Pot type="lb"></Pot>
            <Pot type="rt"></Pot>
        </div>
    </div>
    <canvas class="cvs" ref="canvas"></canvas>
    <div class="btn" @click="toImg">截屏</div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Pot from './pot.vue'
import { usePositionStore } from '@/stores/position';
import { url } from 'inspector';
const positionStore = usePositionStore()
const src = ref("https://pica.zhimg.com/70/v2-39df94aeab903ab730124a43c3090289_1440w.avis?source=172ae18b&biz_tag=Post");
const pic = ref(null);
const canvas = ref(null);
onMounted(() => {
    const container = document.getElementById("imageContainer");
    const mc = new Hammer.Manager(container);

    let initialScale = 1;
    let currentScale = 1;
    let initialX = 0;
    let initialY = 0;
    let currentX = 0;
    let currentY = 0;

    mc.add(new Hammer.Pinch());
    mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0, pointers: 1 }));

    mc.on("pinchstart panstart", handleGestureStart);
    mc.on("pinchmove panmove", handleGestureMove);
    mc.on("pinchend panend", handleGestureEnd);

    function handleGestureStart(event) {
        console.log("ev", event)
        if(event.target.classList.contains("pot")) return
       
        if (event.pointers.length === 2) {
            initialScale = currentScale;
            initialX = currentX;
            initialY = currentY;
        } else if (event.pointers.length === 1) {
            initialX = currentX;
            initialY = currentY;
        }
    }

    function handleGestureMove(event) {
        if(event.target.classList.contains("pot")) return

        if (event.pointers.length === 2) {
            const scale = initialScale * event.scale;
            const deltaX = initialX + event.deltaX;
            const deltaY = initialY + event.deltaY;

            currentScale = scale;
            currentX = deltaX;
            currentY = deltaY;

            applyTransform();
        } else if (event.pointers.length === 1) {
            const scale = initialScale;
            const deltaX = initialX + event.deltaX / scale;
            const deltaY = initialY + event.deltaY / scale;

            currentX = deltaX;
            currentY = deltaY;

            applyTransform();
        }
    }

    function handleGestureEnd(event) {
        if(event.target.classList.contains("pot")) return

        if (event.pointers.length === 0 || event.pointers.length === 1) {
            initialScale = currentScale;
            initialX = currentX;
            initialY = currentY;
        }
    }

    function applyTransform() {
        const image = container.querySelector(".box");
        image.style.transform = `scale(${currentScale}) translate(${currentX}px, ${currentY}px)`;
    }
})

function toImg(){
    const img = new Image();
    img.onload = ()=>{
        console.log(img.naturalWidth, img.naturalHeight);
        const rect = (pic.value as any).getBoundingClientRect();
        const scale = rect.width / img.naturalWidth;
        console.log("scale", scale);
        let w = (rect.right + positionStore.rt.x) - (rect.left + positionStore.lt.x);
        let h = (rect.bottom + positionStore.lb.y) - (rect.top + positionStore.lt.y);
        let x = positionStore.lt.x;
        let y = positionStore.lt.y;
        console.log("start", x, y, w, h)
        w = w / scale;
        h = h / scale;
        x = x / scale;
        y = y / scale;
        console.log("end", x, y, w, h)
        // const canvas = document.createElement("canvas");
        const cvs = canvas.value as any;
        const ctx = cvs.getContext("2d");
        cvs.width = w;
        cvs.height = h;
        console.log("ctx", ctx)
        ctx?.drawImage(img, x, y, w, h, 0, 0, w, h);

        try{
            cvs.toBlob(function(blob:any){
                const t = URL.createObjectURL(blob);
                console.log(t);
                window.open(t)
            })
        }
        catch(e:any){
            console.error("跨域", e)
        }
        
    }
    img.src = src.value;
}

</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
